<template>
    <div class="container">
        <!-- 导航栏区域开始 -->
        <TridentNavBar>
            <template #left><i class="iconfont icon-zuojiantou"></i></template>
            <template #right><i class="iconfont icon-gengduo" @click="$router.push('/setInformation')"></i></template>
        </TridentNavBar>
        <!-- 导航栏区域结束 -->

        <!-- 用户信息区域开始 -->
        <div class="info-wrap">
            <div class="image-box">
                <van-image
                    width="60"
                    height="60"
                    :src="global.MINIO_FILE_DOMAIN + user?.avatar_url"
                    fit="contain"
                />
            </div>

            <div class="info-box">
                <p class="username">{{user?.username}}</p>
                <p class="region">地区：{{ user?.region }}</p>
            </div>
        </div>
        <!-- 用户信息区域结束 -->

        <!-- 设置备注和标签 -->
        <TridentCellItem :item="{title: '设置备注和标签', url: '/setLabel'}" />

        <div class="panel-wrap">
            <TridentCellItem :item="{title: '个性签名', value: user?.selfdom_sign}" :is_arrows="false" />
            <TridentCellItem :item="{title: '来源', value: '来自手机号搜索'}" :is_arrows="false" />
        </div>


        <div class="opt-wrap" @click="$router.push('/applyFriend?uid='+ user?.uid)">添加到通讯录</div>
    </div>
</template>

<script lang="ts" setup>
import { reqUserInfoAPI } from '@/apis/user'
import type { User } from '@/types/user'
import { inject, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

// 全局属性
const global:any = inject('global')

const route = useRoute()

const user = ref<User>()

onMounted(() => {
    console.log(route.query.uid);
    
    getUserDetail(route.query.uid + '')
})

const getUserDetail = async (uid: string) => {
    const result = await reqUserInfoAPI(uid)
    user.value = result.data
}
</script>

<style scoped lang="scss">
page,
.container {
    height: 100vh;
    .info-wrap {
        padding-top: 60px;
        padding-left: 10px;
        background-color: #fff;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f5f5f5;
        padding-bottom: 20px;
        .image-box {
            width: 60px;
            height: 60px;
            line-height: 60px;
            border-radius: 5px;
            text-align: center;
            border: 1px solid #f1efef;
            overflow: hidden;
        }

        .info-box {
            margin-left: 15px;
            .username {
                font-size: 18px;
                color: #000;
            }
            .region {
                color: #878585;
                margin-top: 5px;
                font-size: 12px;
            }
        }
    }

    .panel-wrap {
        margin-top: 10px;
    }

    .opt-wrap {
        margin-top: 10px;
        height: 50px;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #426189;
    }
}
</style>